export class Tween {
	constructor() {
		this.isPaused = false;
		this.frameId = 0;
	}

	create(x, y, width, id, parent) {
		let img = document.createElement('img');
		img.id = id;
		//img.src = this.getPath("fish_1");
		img.style.position = "absolute";

		if (x === 0) {
			img.style.right = document.documentElement.clientWidth + 'px';
		} else {
			img.style.left = document.documentElement.clientWidth + 'px';
		}
		img.style.top = y + 'px';
		img.style.width = width / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;

		parent.appendChild(img);
	}

	tweenFrame(id, imgs, time) {
		if (this.frameId !== 0) {
			clearInterval(this.frameId)
		}
		let count = 0;
		let img = document.getElementById(id);
		this.frameId = setInterval(() => {
			img.src = imgs[count];
			count++;
			if (count === imgs.length) {
				count = 0;
			}
		}, time);
	}

	/**
	 * 逐步移动(假设为span需设置display为inline-block)
	 * @param {*} id 
	 * @param {*} x px
	 * @param {*} y 
	 * @param {*} time ms
	 * @param {*} callback 
	 */
	tweenMove(id, x, y, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		var startTimestamp = 0;
		var flag = element.style.transform.search(/translate\(/) === -1;
		var originX = flag ?
			0 :
			parseFloat(
				element.style.transform
					.match(/translate\((-)?\d+(\.\d+)?px,([ ])?(-)?\d+(\.\d+)?px\)/)
					.toString()
					.match(/(-)?\d+(\.\d+)?px,/)
			);
		var originY = flag ?
			0 :
			parseFloat(
				element.style.transform
					.match(/translate\((-)?\d+(\.\d+)?px,([ ])?(-)?\d+(\.\d+)?px\)/)
					.toString()
					.match(/([ ])?(-)?\d+(\.\d+)?px\)/)
			);
		if (flag)
			element.style.transform = element.style.transform.concat(' translate(' + originX + 'px, ' + originY + 'px)');
		if (time === 0) {
			element.style.transform = element.style.transform.replace(
				/translate\((-)?\d+(\.\d+)?px,([ ])?(-)?\d+(\.\d+)?px\)/,
				'translate(' + (originX + x) + 'px, ' + (originY + y) + 'px)'
			);
			if (callback) callback();
			return;
		}
		var speedX = x / time;
		var speedY = y / time;
		let that = this;
		let deltaTime = 0;
		var animate = function () {
			requestAnimationFrame(function (delta) {
				if (startTimestamp === 0) startTimestamp = delta;
				if (that.isPaused) {
					startTimestamp = delta - deltaTime;
				} else
					deltaTime = delta - startTimestamp;
				if (deltaTime >= time) {
					element.style.transform = element.style.transform.replace(
						/translate\((-)?\d+(\.\d+)?px,([ ])?(-)?\d+(\.\d+)?px\)/,
						'translate(' + (originX + x) + 'px, ' + (originY + y) + 'px)'
					);
					if (callback) callback();
				} else {
					animate();
					if (!that.isPaused)
						element.style.transform = element.style.transform.replace(
							/translate\((-)?\d+(\.\d+)?px,([ ])?(-)?\d+(\.\d+)?px\)/,
							'translate(' + (originX + speedX * deltaTime) + 'px, ' + (originY + speedY * deltaTime) + 'px)'
						);
				}
			});
		};
		animate();
	}

	/**
	 * 角度缓动
	 * @param {*} id 
	 * @param {*} angle 角度值[0-360]
	 * @param {*} time 
	 * @param {*} callback 
	 */
	tweenRotate(id, angle, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		var startTimestamp = 0;
		var flag = element.style.transform.search(/rotate\(/) === -1;
		var origin = flag ?
			0 :
			parseFloat(element.style.transform.match(/rotate\(\d+(\.\d+)?deg\)/).toString().match(/\d+(\.\d+)?/));
		if (flag) element.style.transform = element.style.transform.concat(' rotate(' + origin + 'deg)');
		if (time === 0) {
			element.style.transform = element.style.transform.replace(
				/rotate\(\d+(\.\d+)?deg\)/,
				'rotate(' + (origin + angle) + 'deg)'
			);
			if (callback) callback();
			return;
		}
		var speed = angle / time;
		var animate = function () {
			requestAnimationFrame(function (delta) {
				if (startTimestamp === 0) startTimestamp = delta;
				var deltaTime = delta - startTimestamp;
				if (deltaTime >= time) {
					deltaTime = time;
					if (callback) callback();
				} else animate();
				element.style.transform = element.style.transform.replace(
					/rotate\(\d+(\.\d+)?deg\)/,
					'rotate(' + (origin + speed * deltaTime) + 'deg)'
				);
			});
		};
		animate();
	}

	tweenLoopRotate(id, angle, time) {
		let that = this;
		this.tweenRotate(id, angle, time, function () {
			that.tweenLoopRotate(id, angle, time);
		});
	}

	/**
	 * 绕Y轴转动
	 * @param {*} id 
	 * @param {*} angle 角度值[0-360]
	 * @param {*} time 
	 * @param {*} callback 
	 */
	tweenRotateY(id, angle, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		var startTimestamp = 0;
		var flag = element.style.transform.search(/rotateY\(/) === -1;
		var origin = flag ?
			0 :
			parseFloat(element.style.transform.match(/rotateY\(\d+(\.\d+)?deg\)/).toString().match(/\d+(\.\d+)?/));
		if (flag) element.style.transform = element.style.transform.concat(' rotateY(' + origin + 'deg)');
		if (time === 0) {
			element.style.transform = element.style.transform.replace(
				/rotateY\(\d+(\.\d+)?deg\)/,
				'rotateY(' + (origin + angle) + 'deg)'
			);
			if (callback) callback();
			return;
		}
		var speed = angle / time;
		var animate = function () {
			requestAnimationFrame(function (delta) {
				if (startTimestamp === 0) startTimestamp = delta;
				var deltaTime = delta - startTimestamp;
				if (deltaTime >= time) {
					deltaTime = time;
					if (callback) callback();
				} else animate();
				element.style.transform = element.style.transform.replace(
					/rotateY\(\d+(\.\d+)?deg\)/,
					'rotateY(' + (origin + speed * deltaTime) + 'deg)'
				);
			});
		};
		animate();
	}

	/**
	 * 渐隐渐显
	 * @param {*} id 
	 * @param {*} target 范围0-1,默认为1
	 * @param {*} time 
	 * @param {*} callback 
	 */
	tweenAlpha(id, target, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		if (target < 0) target = 0;
		if (target > 1) target = 1;
		if (element.style.opacity === '') element.style.opacity = 1;
		var startTimestamp = 0;
		var origin = parseFloat(element.style.opacity);
		if (time === 0) {
			element.style.opacity = target;
			if (callback) callback();
			return;
		}
		var speed = (target - origin) / time;
		var result;
		var animate = function () {
			requestAnimationFrame(function (delta) {
				if (startTimestamp === 0) startTimestamp = delta;
				result = origin + (delta - startTimestamp) * speed;
				if ((result >= target && speed > 0) || (result <= target && speed < 0)) {
					element.style.opacity = target;
					if (callback) callback();
				} else {
					element.style.opacity = result;
					animate();
				}
			});
		};
		animate();
	}

	tweenLoopAlpha(id, target, time) {
		let that = this;
		this.tweenAlpha(id, target, time, function () {
			that.tweenAlpha(id, 1, time, function () {
				that.tweenLoopAlpha(id, target, time);
			})
		})
	}

	/**
	 * 震动(线性)
	 * @param {*} id 
	 * @param {*} range 震动幅度[100, 100](px)
	 * @param {*} count 震动次数
	 * @param {*} time 震动时间(ms)
	 * @param {*} callback 
	 */
	tweenShake(id, range, count, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		var startCount = count;
		var sumCount = (1 + count) * count * 2;
		let that = this;
		var animate = function () {
			var deltaTime = time / sumCount * (startCount - count + 1);
			that.tweenMove(id, range[0], range[1], deltaTime, function () {
				that.tweenMove(id, -range[0], -range[1], deltaTime, function () {
					that.tweenMove(id, -range[0], -range[1], deltaTime, function () {
						that.tweenMove(id, range[0], range[1], deltaTime, function () {
							count--;
							if (count > 0) animate();
							else {
								if (callback) callback();
							}
						});
					});
				});
			});
		};
		animate();
	}

	tweenLoopShake(id, range, time) {
		let that = this;
		this.tweenShake(id, range, 1, time, function () {
			that.tweenLoopShake(id, range, time);
		})
	}

	/**
	 * 比例渐变(整体)
	 * @param {*} id 
	 * @param {*} scale 比例值(始终是相对初始值,如变大2倍,就写2)
	 * @param {*} time ms
	 * @param {*} callback 
	 */
	tweenScale(id, scale, time, callback) {
		var element;
		if (typeof id === Number || typeof id === "string") element = document.getElementById(id);
		else element = id;
		if (!element) {
			console.error('error id:' + id);
			return;
		}
		// delta为累积时间,加起始时间戳做差值
		var startTimestamp = 0;
		var result;
		if (element.innerHTML === '') {
			if (element.width === 0) {
				console.error('scale is not loaded:' + id);
				return;
			}
		} else {
			if (element.style.display === '') element.style.display = 'inline-block';
		}
		var flag = element.style.transform.search(/scale\(/) === -1;
		var origin = flag ?
			1 :
			parseFloat(element.style.transform.match(/scale\(\d+(\.\d+)?\)/).toString().match(/\d+(\.\d+)?/));
		if (flag) element.style.transform = element.style.transform.concat(' scale(' + origin + ')');
		if (time === 0) {
			element.style.transform = element.style.transform.replace(
				/scale\(\d+(\.\d+)?\)/,
				'scale(' + scale + ')'
			);
			if (callback) callback();
			return;
		}
		var speed = (scale - origin) / time;
		var animate = function () {
			requestAnimationFrame(function (delta) {
				if (startTimestamp === 0) startTimestamp = delta;
				result = origin + (delta - startTimestamp) * speed;
				if ((result >= scale && speed > 0) || (result <= scale && speed < 0)) {
					element.style.transform = element.style.transform.replace(
						/scale\(\d+(\.\d+)?\)/,
						'scale(' + scale + ')'
					);
					if (callback) callback();
				} else {
					element.style.transform = element.style.transform.replace(
						/scale\(\d+(\.\d+)?\)/,
						'scale(' + result + ')'
					);
					animate();
				}
			});
		};

		animate();
	}
};

export class Particle {
	constructor() {
		this.enabled = true;
		this.minScale = 0.01;
		this.maxScale = 0.3;
		this.minX = -15;
		this.maxX = 15;
		this.minY = 6;
		this.maxY = 10;
		this.minSpeed = 0.05;
		this.maxSpeed = 0.2;
		this.maxCount = 5;
		this.minLifeTime = 1000;
		this.maxLifeTime = 5000;
	}

	setPosition(sprite) {
		var posX = mathRandom(this.minX, this.maxX);
		var posY = mathRandom(this.minY, this.maxY);
		sprite.style.left = posX + 'px';
		sprite.style.top = posY + 'px'
	}

	createPartical(url, parent) {
		var particals = [];
		let that = this;
		var animate = function () {
			requestAnimationFrame(function (time) {
				if (particals.length < that.maxCount) {
					var scale = mathRandom(that.minScale, that.maxScale);
					var sprite = document.createElement('img');
					sprite.src = url;
					sprite.style.opacity = 50;
					sprite.style.position = 'absolute';
					sprite.style.transform = 'scale(' + scale + ")";
					that.setPosition(sprite);
					var partical = {};
					partical.sprite = sprite;
					partical.speed = mathRandom(that.minSpeed, that.maxSpeed);
					partical.lifeTime = mathRandom(that.minLifeTime, that.maxLifeTime);
					partical.timestamp = time;
					particals.push(partical);
					parent.appendChild(sprite);
				}

				for (var i = 0; i < particals.length; i++) {
					var partical = particals[i];
					if (time - partical.timestamp >= partical.lifeTime) {
						partical.timestamp = time;
						that.setPosition(partical.sprite);
					} else {
						partical.sprite.style.top = parseFloat(partical.sprite.style.top) - partical.speed + 'px';
					}
				}
				if (that.enabled)
					animate();
			});
		};

		animate();
	}

	destroyPartical() {
		this.enabled = false;
	}
}

export class Change {
	constructor() {
		this.sprites = [];
		this.intervalId = 0;
	}
	createChange(data) {
		for (let i = 0; i < data.length; i++) {
			var sprite = document.createElement("img");
			sprite.src = data[i];
			sprite.style.width = "23.4375rem";
			sprite.style.height = "46.875rem";
			sprite.style.position = "absolute";
			sprite.style.left = 0;
			sprite.style.top = 0;
			sprite.style.zIndex = -9999;
			document.body.appendChild(sprite);
			this.sprites.push(sprite);
		}
	}
	playChange() {
		let count = 0;
		let that = this;
		this.intervalId = setInterval(() => {
			if (count === that.sprites.length) {
				that.destroyChange();
				return;
			}
			that.sprites[count].style.zIndex = 9999;
			if (count > 0) that.sprites[count - 1].style.zIndex = -9999;
			else that.sprites[that.sprites.length - 1].style.zIndex = -9999;
			count++;
		}, 100);
	}
	destroyChange() {
		clearInterval(this.intervalId);
		for (let i = 0; i < this.sprites.length; i++) {
			document.body.removeChild(this.sprites[i]);
		}
		this.sprites = [];
	}
}

export class Data {
	constructor() {
		this.init();
	}
	init() {
		this.coral1 = this.getFrames(this.getPath("coral1"), 5);
		this.coral2 = this.getFrames(this.getPath("coral2"), 5);
		this.cucumber = this.getFrames(this.getPath("cucumber"), 5);
		this.fang = this.getFrames(this.getPath("fang"), 5);
		this.idellus = this.getFrames(this.getPath("idellus"), 9);
		this.lion = this.getFrames(this.getPath("lion"), 5);
		this.mackerel = this.getFramesUnique(this.getPath("mackerel"), 12);
		this.shark = this.getFramesUnique(this.getPath("shark"), 10);
		this.slug = this.getFrames(this.getPath("slug"), 5);
		this.squid = this.getFrames(this.getPath("squid"), 5);
		this.whale = this.getFrames(this.getPath("whale"), 26);
		this.worm = this.getFrames(this.getPath("worm"), 5);
		this.bgFish5 = this.getFrames(this.getPath("other/bgFish1"), 15);
		this.bgFish6 = "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/other/fish_6/1.png";
		this.change = this.getFramesUnique(this.getPath("change"), 15);
	}
	getFrames(path, length) {
		let fishes = [];
		for (let i = 0; i < length * 2 - 2; i++) {
			let index = (i + 1);
			if (index > length) index = length * 2 - index;
			fishes.push(path + '/' + index + ".png")
		}

		return fishes;
	}
	getFramesUnique(path, length) {
		let fishes = [];
		for (let i = 0; i < length; i++) {
			let index = (i + 1);
			fishes.push(path + '/' + index + ".png")
		}

		return fishes;
	}
	getPath(name) {
		let path = "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/";
		path += name;

		return path
	}
	getAllPath() {
		let path = [];
		path = path.concat(this.coral1);
		path = path.concat(this.coral2);
		path = path.concat(this.cucumber);
		path = path.concat(this.fang);
		path = path.concat(this.idellus);
		path = path.concat(this.lion);
		path = path.concat(this.mackerel);
		path = path.concat(this.shark);
		path = path.concat(this.slug);
		path = path.concat(this.squid);
		path = path.concat(this.whale);
		path = path.concat(this.slug);
		path.push(this.getPath("other/fish_1.png"));
		path.push(this.getPath("other/fish_2.png"));
		path.push(this.getPath("other/fish_3.png"));
		path.push(this.getPath("other/radar.png"));
		path.push(this.getPath("other/radar_scanning.png"));
		path.push(this.getPath("other/ship.png"));
		path.push(this.getPath("share/bg.png"));
		path.push(this.getPath("share/border.png"));
		path.push(this.getPath("share/close.png"));
		path.push(this.getPath("share/default.png"));
		path.push(this.getPath("struggle/light.png"));
		path.push(this.getPath("struggle/mask.png"));
		path.push(this.getPath("struggle/ship.png"));

		return path;
	}
}

export class Animation {
	constructor() {
		this.isEnd = false;
	}
	/**
	 * 大鱼群动画
	 * @param {Number} x left
	 * @param {Number} y top
	 * @param {HTMLElement} parent 父物体
	 */
	animationFish1(x, y, parent) {
		let img = document.createElement('img');
		img.id = "fish_1";
		img.src = this.getPath("fish_1");
		img.style.position = "absolute";
		img.style.left = x / 16 + 'rem';
		img.style.top = y / 16 + 'rem';
		img.style.width = 500 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		tween.tweenLoopRotate(img.id, 360, 50000);
	}
	/**
	 * 黑色鱼群动画动画
	 * @param {Number} x left
	 * @param {Number} y top
	 * @param {HTMLElement} parent 父物体
	 */
	animationFish2(x, y, parent) {
		let img = document.createElement('img');
		img.id = "fish_2";
		img.src = this.getPath("fish_2");
		img.style.position = "absolute";
		img.style.left = x / 16 + 'rem';
		img.style.top = y / 16 + 'rem';
		img.style.width = 326 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		tween.tweenLoopAlpha(img.id, 0.2, 2000);
	}
	/**
	 * 浮游生物动画
	 * @param {Number} x left
	 * @param {Number} y top
	 * @param {HTMLElement} parent 父物体
	 */
	animationFish3(x, y, parent) {
		let img = document.createElement('img');
		img.id = "fish_3";
		img.src = this.getPath("fish_3");
		img.style.position = "absolute";
		img.style.left = x / 16 + 'rem';
		img.style.top = y / 16 + 'rem';
		img.style.width = 375 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		tween.tweenLoopAlpha(img.id, 0.2, 2000);
	}
	/**
	 * 背景鱼群动画动画
	 * @param {Number} x left
	 * @param {Number} y top
	 * @param {HTMLElement} parent 父物体
	 */
	animationFish4(x, y, parent) {
		let img = document.createElement('img');
		img.id = "fish_4";
		img.src = this.getPath("fish_4");
		img.style.position = "absolute";
		img.style.left = x / 16 + 'rem';
		img.style.bottom = y + 'px';
		img.style.width = 226 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		tween.tweenMove(img.id, -600, 0, 2000);
	}
	/**
	 * 背景鱼群斜向动画
	 * @param {Number} x left
	 * @param {Number} y top
	 * @param {HTMLElement} parent 父物体
	 */
	animationFish4(x, y, parent) {
		let img = document.createElement('img');
		img.id = "fish_4";
		img.src = this.getPath("fish_4");
		img.style.position = "absolute";
		img.style.left = x / 16 + 'rem';
		img.style.bottom = y + 'px';
		img.style.width = 226 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		tween.tweenMove(img.id, -600, 0, 2000);
	}
	animationShip(x, y, parent) {
		let img = document.createElement('img');
		img.id = "chinaHonor";
		img.src = this.getPath("ship");
		img.style.position = "absolute";
		let offset = document.documentElement.clientWidth;
		if (x === 0) {
			img.style.right = offset + 'px';
		} else {
			img.style.left = offset - 120 + 'px';
		}
		//img.style.left = x / 16 + 'rem';
		img.style.top = y + 'px';
		img.style.width = 170.5 / 16 + "rem";
		img.style.height = "auto";
		img.style.zIndex = 1;
		parent.appendChild(img);
		let tween = new Tween();
		//tween.tweenLoopShake(img.id, [0, 15], 4000);
	}
	animationRadar(x, y, parent, id, offset) {
		let root = document.createElement("div");
		root.id = id
		root.style.width = '3.125rem';
		root.style.height = '3.125rem';
		root.style.position = "absolute";
		root.style.zIndex = 2;
		root.style.visibility = 'hidden';
		offset = document.documentElement.clientWidth + parseInt(offset)
		if (x === 0) {
			root.style.right = offset + 'px';
		} else {
			root.style.left = offset + 'px';
		}
		//root.style.left = x / 16 + 'rem';
		root.style.top = y + 'px';
		parent.appendChild(root);
		let radar = document.createElement('img');
		radar.src = this.getPath("radar");
		radar.style.width = '3.125rem';
		radar.style.height = '3.125rem';
		radar.style.position = "absolute";
		radar.style.left = 0;
		radar.style.top = 0;
		root.appendChild(radar);
		let div = document.createElement("div");
		div.id = 'radar_scanning_' + id;
		div.style.width = '3.125rem';
		div.style.height = '3.125rem';
		div.style.position = "absolute";
		div.style.left = 0;
		div.style.top = 0;
		root.appendChild(div);
		let scanning = document.createElement('img');
		scanning.src = this.getPath("radar_scanning");
		scanning.style.width = '1.625rem';
		scanning.style.height = '2.0125rem';
		scanning.style.position = "absolute";
		scanning.style.left = 0;
		scanning.style.top = 0;
		div.appendChild(scanning);
		let tween = new Tween();
		tween.tweenLoopRotate(div.id, 360, 3000);

		return root;
	}
	animationStruggle(x, y, parent) {
		let root = document.createElement("div");
		root.id = "submarine"
		root.className = "submarine-new"
		root.style.width = '9.5625rem';
		root.style.height = '5.34375rem';
		//root.style.width = '11.5625rem';
		//root.style.height = '7.34375rem';
		root.style.position = "fixed";
		root.style.zIndex = 188;
		root.style.left = "50%";
		root.style.transform = 'translateX(-50%)'
		root.style.top = "0px";
		parent.appendChild(root);
		let path = "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/struggle/"
		let ship = document.createElement('img');
		ship.src = path + "ship.png";
		ship.style.width = '100%';
		ship.style.height = '100%';
		ship.style.position = "absolute";
		ship.style.left = 0;
		ship.style.top = 0;
		root.appendChild(ship);
		let mask = document.createElement('img');
		mask.id = "mask";
		mask.src = path + "mask.png";
		mask.style.width = '100%';
		mask.style.height = '100%';
		mask.style.position = "absolute";
		mask.style.left = 0;
		mask.style.top = 0;
		mask.style.opacity = 0;
		root.appendChild(mask);
		let light = document.createElement('img');
		light.id = 'light';
		light.src = path + "light.png";
		light.style.width = '3.71875rem';
		light.style.height = '4.375rem';
		light.style.position = "absolute";
		light.style.left = '-2rem';
		light.style.top = "3.6rem";
		light.style.zIndex = 188;
		//root.appendChild(light);
		let light1 = document.createElement('img');
		light1.id = 'light1';
		light1.src = path + "light.png";
		light1.style.width = '3.71875rem';
		light1.style.height = '4.375rem';
		light1.style.position = "absolute";
		light1.style.right = '-2.2rem';
		light1.style.top = "3.3rem";
		light1.style.zIndex = 188;
		light1.style.transform = "rotate(-90deg)"
		root.appendChild(light1);
		let tween = new Tween();
		//tween.tweenLoopAlpha("light", 0.2, 2000);
		tween.tweenLoopAlpha("light1", 0.2, 2000);
		//tween.tweenLoopRotate("light", 45, 2000);
		//tween.tweenLoopRotate("light1", 45, 2000);
		//tween.tweenLoopAlpha("mask", 0.6, 2000);

		return [root, mask]
	}
	animationBubble(parent) {
		let url =
			"https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/loading/bubble.png";
		let tween = new Tween();
		let that = this;
		for (let i = 0; i < 35; i++) {
			let img = document.createElement('img');
			img.id = "comment_bubble_" + i;
			img.src = url;
			img.style.position = "relative";
			img.onload = function () {
				parent.appendChild(img);
				let animate = function () {
					img.style.left = mathRandom(0, 200) + 'px';
					img.style.bottom = mathRandom(0, 100) + 'px';
					img.style.transform = "scale(" + mathRandom(0.01, 0.1) + ")";
					img.style.opacity = 1;
					let deltaTime = mathRandom(2000, 6000);
					let deltaScale = mathRandom(0.2, 0.6);
					tween.tweenScale(img.id, deltaScale, deltaTime);
					tween.tweenAlpha(img.id, 0, deltaTime);
					tween.tweenMove(img.id, 0, -1000, deltaTime, function () {
						if (!that.isEnd) animate();
					});
				}
				animate();
			}
		}
	}
	animationCircle(parent) {
		let father = document.createElement("div");
		father.style.width = '120px';
		father.style.height = '120px';
		father.style.position = 'absolute';
		father.style.left = '50%';
		father.style.top = '50%';
		father.style.transform = "translate(-50%, -50%)";
		parent.appendChild(father);
		let child_1 = document.createElement("div");
		child_1.style.width = '50px';
		child_1.style.height = '50px';
		child_1.style.position = 'absolute';
		child_1.style.left = '50%';
		child_1.style.top = '50%';
		child_1.style.transform = "translate(-50%, -50%)";
		child_1.style.border = "solid white 2px";
		child_1.style.borderRadius = '50%';
		child_1.style.opacity = 0.8;
		father.appendChild(child_1);
		let child_2 = document.createElement("div");
		child_2.style.width = '100px';
		child_2.style.height = '100px';
		child_2.style.position = 'absolute';
		child_2.style.left = '50%';
		child_2.style.top = '50%';
		child_2.style.transform = "translate(-50%, -50%)";
		child_2.style.border = "solid white 4px";
		child_2.style.borderRadius = '50%';
		father.appendChild(child_2);
		let tween = new Tween();
		let that = this;
		let animate = function () {
			child_2.style.transform = "translate(-50%, -50%) scale(0.5)";
			child_2.style.opacity = 1;
			tween.tweenScale(child_2, 1, 800, function () {
				if (!that.isEnd)
					animate();
			});
			tween.tweenAlpha(child_2, 0, 600);
		};
		animate();
	}
	getPath(name) {
		let path = "https://sapi.yangshipin.cn/assets/x/other/deepDiving/picture/other/";
		path += name + '.png';

		return path
	}
}

function mathRandom(min, max) {
	return Math.random() * (max - min) + min;
}